<template>
	<view>
		<view class="content">
			<view class="tabs">
				<u-tabs :list="list" lineWidth="50" :current="tab" lineColor="#c55a5c" :scrollable="false"
					@change="handleTebs">
				</u-tabs>
			</view>
			<view class="info" v-if="tab==0">
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">等待买家付款</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/index/banner1.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x2</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn">
						<view class="cancellation">
							取消订单
						</view>
						<view class="confirm">
							立即付款
						</view>
					</view>
				</view>
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">等待买家付款</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/center/bg.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x1</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn">
						<view class="cancellation">
							取消订单
						</view>
						<view class="confirm">
							立即付款
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="tab==1">
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">买家已付款</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/center/bg.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x1</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn">
						<view class="cancellation">
							取消订单
						</view>
						<view class="confirm">
							提醒发货
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="tab==2">
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">买家已发货</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/center/bg.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x1</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn">
						<view class="cancellation" @click="$router.push('/pages/user/order/order_detail')">
							查看物流
						</view>
						<view class="confirm">
							确认收货
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="tab==3">
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">买家已收货/待评价</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/center/bg.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x1</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn">
						<view class="cancellation" @click="$router.push('/pages/user/order/order_detail')">
							查看物流
						</view>
						<view class="confirm">
							评价
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="tab==4">
				<view class="store">
					<view class="time">
						<text style="font-size: 24rpx;color: #c55a5c;">交易成功</text>
						<text style="font-size: 21rpx;color: #999;">2023-05-23 10:58:23</text>
					</view>
					<view class="detail">
						<image src="../../../static/img/center/bg.jpg" mode="">
						</image>
						<view class="pro_msg">
							<view style="font-size: 26rpx;">丛林物语双面印花然后他一人同意同意让他让他让他进入磨毛四件套</view>
							<view class="num">
								<view style="font-size: 26rpx;color: #999;">
									米白色
								</view>
								<text>￥435</text>
							</view>
							<view class="pro_num">x1</view>
							<view style="clear: both;"></view>
						</view>
						<view style="clear: both;"></view>
					</view>
					<view class="total">
						<view class="">
							<text>共</text>
							<text style="color: #c55a5c;margin-left: 4rpx;margin-right: 4rpx;"> 1 </text>
							<text>件商品</text>
						</view>
						<view style="margin-left: 28rpx;">
							<text>合计：</text>
							<text style="color: #c55a5c;">￥530.99</text>
						</view>
					</view>
					<view class="total btn" @click="$router.push('/pages/user/order/order_detail')">
						<view class="cancellation">
							查看物流
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待付款',
				}, {
					name: '代发货',
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}],
				tab: 0,
				tab_id: ''
			}
		},
		methods: {
			handleTebs({ index }) {
				this.tab = index
			}
		},
		mounted() {
			this.handleTebs()
			// this.tab_id = JSON.parse(decodeURIComponent(index));
		},
		// onLoad: function(option) {
		// 	// this.tab_id = JSON.parse(decodeURIComponent(index));
		// 	// console.log(this.tab_id);
		// }
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;

		.tabs {
			width: 100%;
			background-color: #fff;
		}
	}

	.info {
		padding: 0 21rpx;
		margin-top: 30rpx;

		.total {
			display: flex;
			margin-top: 15rpx;
			justify-content: flex-end;
		}

		.btn {
			margin-top: 45rpx;
		}

		.cancellation {
			border: 1px solid #ddd;
			border-radius: 50rpx;
			color: #383636;
			width: 156rpx;
			height: 45rpx;
			text-align: center;
			padding: 11rpx 29rpx;
			font-size: 24rpx;
			line-height: 45rpx;
			cursor: pointer;
		}

		.confirm {
			border: 1px solid #c55a5c;
			border-radius: 50rpx;
			color: #c55a5c;
			font-size: 24rpx;
			width: 156rpx;
			height: 45rpx;
			text-align: center;
			padding: 11rpx 29rpx;
			line-height: 45rpx;
			margin-left: 21rpx;
		}
	}

	.store {
		background-color: #fff;
		margin-top: 23rpx;
		border-bottom: 1px solid #ddd;
		padding: 30rpx 28rpx 24rpx 22rpx;

		.time {
			display: flex;
			justify-content: space-between;
			padding-bottom: 19rpx;
			border-bottom: 1px solid #ddd;
		}

		.detail {
			border-bottom: 1px solid #ddd;
			padding-bottom: 20rpx;

			.pro_num {
				font-size: 28rpx;
				color: #999;
				float: right;
			}

			.pro_msg {
				margin-top: 33rpx;
			}
		}

		image {
			width: 165rpx;
			height: 165rpx;
			margin-right: 24rpx;
			float: left;
		}

		.remove {
			color: gray;
			margin-left: 90rpx;
			font-size: 20rpx;
		}

		.num {
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;

			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>